<template>
  <zeda-dialog
    v-model="visible"
    title="新建机构"
    width="500px"
    :before-close="handleClose"
    class="dialog-continer"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级部门" prop="parentId">
            <Treeselect
              v-model="form.parentId"
              :options="deptOptions"
              :normalizer="normalizer"
              placeholder="选择上级部门"
              class="parent-dept-area"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="显示排序" prop="orderNum">
            <el-input-number
              v-model="form.orderNum"
              controls-position="right"
              :min="0"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="部门名称" prop="deptName">
            <el-input
              v-model.trim="form.deptName"
              maxlength="30"
              placeholder="请输入部门名称"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="部门汇总名称" prop="deptNickname">
            <el-input
              v-model.trim="form.deptNickname"
              maxlength="30"
              placeholder="请输入部门汇总名称"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="部门类型" prop="type">
            <el-select
              size="small"
              v-model="form.type"
              placeholder="请选择部门类型"
            >
              <el-option
                v-for="item in dict.type.sys_dept_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="部门状态">
            <el-radio-group v-model="form.status" size="small">
              <el-radio
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.value"
              >
                {{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <form-button
      slot="footer"
      :loading="loading"
      @cancel="handleClose"
      :submitText="'确定'"
      @submit="submit"
    >
    </form-button>
  </zeda-dialog>
</template>

<script>
import { listDept, getDeptdetail, addDept } from "@/api/system/orgdept";
import FormButton from "@/components/FormButton";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import DictionariesSelect from "@/components/DictionariesSelect/index.vue";

export default {
  dicts: ["sys_dept_type", "sys_normal_disable"],
  components: {
    Treeselect,
    FormButton,
    DictionariesSelect,
  },
  props: {
    id: {
      type: [Number, String],
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false, // 按钮加载中判断
      form: {
        parentId: null,
        orderNum: null,
        deptName: null,
        deptNickname: null,
        type: null,
        status: null,
      },
      rules: {
        parentId: [
          { required: true, message: "上级部门不能为空", trigger: "blur" },
        ],
        deptName: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
        ],
        deptNickname: [
          { required: true, message: "部门汇总名称不能为空", trigger: "blur" },
        ],
        orderNum: [
          { required: true, message: "显示排序不能为空", trigger: "blur" },
        ],
        type: [
          { required: true, message: "部门类型不能为空", trigger: "blur" },
        ],
        status: [
          { required: true, message: "部门状态不能为空", trigger: "change" },
        ],
      },
      deptOptions: [],
    };
  },
  watch: {
    visible(value) {
      if (value) {
        if (String(this.id).length > 0) {
          this.getTree();
        }
      }
    },
  },
  methods: {
    getTree() {
      listDept({})
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let arr = res?.data ?? [];
          this.deptOptions = this.handleTree(arr, "deptId");
          this.setParentID();
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    setParentID() {
      this.form.parentId = this.id;
      this.form.orderNum = 0;
      this.form.status = "0";
    },
    // getInfo() {
    //   getDeptdetail(this.id)
    //     .then((res) => {
    //       if (res.code === 700) {
    //         this.$message.warning(res.msg);
    //         return false;
    //       }
    //       let newData = res?.data || {};
    //       if (Object.keys(newData).length > 0) {
    //         this.form.parentId = newData?.parentId;
    //         this.form.orderNum = newData?.orderNum;
    //         this.form.deptName = newData?.deptName;
    //         this.form.deptNickname = newData?.deptNickname;
    //         this.form.type = newData?.type;
    //         this.form.status = newData?.status;
    //       }
    //     })
    //     .catch(() => {
    //       // this.$message.error("系统错误,请联系管理员!");
    //     });
    // },
    submit() {
      const data = {
        ...this.form,
      };
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.request(data);
        } else {
          return false;
        }
      });
    },
    request(data) {
      addDept(data)
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.$message.success("操作成功");
          this.handleClose(true);
        })
        .catch(() => {
          this.loading = false;
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    handleClose(status) {
      this.$refs["form"].resetFields();
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children,
      };
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form {
  .el-input,
  .el-cascader,
  .el-input-number,
  .el-select {
    width: 100% !important;
  }
}
.parent-dept-area {
  height: 24px !important;
  ::v-deep .vue-treeselect__control {
    height: 22px !important;
  }
}

.dialog-continer {
  top: 150px;
}
</style>
